<template>
	<!-- 这是首页 -->
	<view class="index">
		
		<view class="index-header">
			
			<public-header></public-header>
			
			<!-- 通知栏 -->
			<view class="index-notice flex">
				<!-- <image src="/static/images/notice.png" mode="aspectFill" class="index-notice__icon"></image> -->
				<uni-notice-bar class="index-notice__item" background-color="transparnt" color="#fff" showIcon scrollable single text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。" />
			</view>
			
			<!-- 轮播图 -->
			<swiper class="index-swiper" circular  autoplay interval="3000"
				duration="500">
				<swiper-item v-for="item in bannerList" :key="item.id">
					<view class="index-swiper__item">
						<image :src="item.url" mode="aspectFill" class="index-swiper__item-img"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<!-- 头部搜索部分 -->
			<view class="index-search flex" @click="onClickToSearch">
				<image src="/static/images/search.png" mode="aspectFill" class="index-search__icon"></image>
				<input type="text"  class="index-search__input" placeholder="搜索"/>
			</view>
		</view>
		
		<view class="index-main">
			
			<!-- 头部tab栏部分 -->
			<view class="index-tab flex">
				<view class="index-tab__item"
				v-for="(item,index) in indexTabItems"
				:key="item.id"
				:class="{'index-tab__item--active':activeTabIndex===index}"
				@tap="changeTab(index)"
				>
					{{item.title}}
				</view>
			</view>
			
			<view class="index-items flex">
				<!-- 寻物部分 -->
				<index-ver-item
				v-show="activeTabIndex===0"
				v-for="item in lostItems"
				:key="item.id"
				:data="item.data"
				></index-ver-item>

				<index-ver-item
				v-show="activeTabIndex===1"
				v-for="item in foundItems"
				:key="item.id"
				:data="item.data"
				></index-ver-item>

				<index-ver-item
				v-show="activeTabIndex===2"
				v-for="item in idleItems"
				:key="item.id"
				:data="item.data"
				></index-ver-item>

				<index-ver-item
				v-show="activeTabIndex===3"
				v-for="item in findIdleItems"
				:key="item.id"
				:data="item.data"
				></index-ver-item>
				
				<!-- 论坛部分 -->
				<index-forum-display-item
				v-show="activeTabIndex===4"
				>
					<!-- 用户交互部分 -->
					<view class="index-forum__interaction flex">
						<view class="index-forum__interaction-like flex-column"
						@tap="toggleLikeIcon"
						>
							<image src="/static/images/like.png" mode="aspectFill" class="index-forum__interaction-icon" v-show="!likeIconActive"></image>
							<image src="/static/images/like--active.png" mode="aspectFill" class="index-forum__interaction-icon" v-show="likeIconActive"></image>
							<text class="index-forum__interaction-text">1.5w</text>
						</view>
						
						<view class="index-forum__interaction-dislike flex-column"
						@tap="toggleDisLikeIcon"
						>
							<image src="/static/images/dislike.png" mode="aspectFill" class="index-forum__interaction-icon" v-show="!disLikeIconActive"></image>
							<image src="/static/images/dislike--active.png" mode="aspectFill" class="index-forum__interaction-icon" v-show="disLikeIconActive"></image>
							<text class="index-forum__interaction-text">5k</text>
						</view>
						
						<view class="index-forum__interaction-reply flex-column">
							<image src="/static/images/comment.png" mode="aspectFill" class="index-forum__interaction-icon"></image>
							<text class="index-forum__interaction-text">12回复</text>
						</view>
						
						<view class="index-forum__interaction-view-reply">
							共12条回复
						</view>
					</view>
				</index-forum-display-item>
			</view>
			
		</view>
		
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import uniNoticeBar from '@/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue';
	import publicHeader from '@/components/publicHeader/publicHeader.vue';
	import indexVerItem from '@/components/indexVerItem/indexVerItem.vue';
	import indexForumDisplayItem from	'@/components/indexForumDisplayItem/indexForumDisplayItem.vue';
	import { getBannerList } from '@/utils/apis.js';
	import {onShow} from "@dcloudio/uni-app";
	
	const indexTabItems = ref([
		{title:'寻物信息',id:'indexTab01'},
		{title:'失物信息',id:'indexTab02'},
		{title:'闲置物品',id:'indexTab03'},
		{title:'寻找闲置',id:'indexTab04'},
		{title:'论坛发布',id:'indexTab05'},
	])

	const postData = ref({
		id:'lostItems05',
		data:{
			image: 'http://localhost:3000/images/items/U盘.jpg',
			name: 'U盘',
			status: '待寻找',
			date: '2025-01-08',
			type: '生活用品'
		}
	})
	// 寻物数据
	const lostItems = ref([
		{
			id: 'lostItems01',
			data: {
				image: 'http://localhost:3000/images/items/白色水杯.jpg',
				name: '白色水杯',
				status: '待寻找',
				date: '2025-01-08',
				type: '生活用品'
			}
		},
		{
			id: 'lostItems02', 
			data: {
				image: 'http://localhost:3000/images/items/白色衣架.jpg',
				name: '白色衣架',
				status: '待寻找',
				date: '2025-01-07',
				type: '电子设备'
			}
		},
		{
			id: 'lostItems03',
			data: {
				image: 'http://localhost:3000/images/items/笔记本.jpg',
				name: '笔记本',
				status: '待寻找',
				date: '2025-01-06', 
				type: '证件'
			}
		},
		{
			id: 'lostItems04',
			data: {
				image: 'http://localhost:3000/images/items/发夹.jpg',
				name: '发夹',
				status: '待寻找',
				date: '2025-01-05',
				type: '电子设备'
			}
		}
	])

	// 失物数据
	const foundItems = ref([
		{
			id: 'foundItems01',
			data: {
				image: 'http://localhost:3000/images/items/帆布袋.jpg',
				name: '帆布袋',
				status: '待认领',
				date: '2025-01-08',
				type: '生活用品'
			}
		},
		{
			id: 'foundItems02',
			data: {
				image: 'http://localhost:3000/images/items/高数书.jpg',
				name: '高数书',
				status: '待认领',
				date: '2025-01-07',
				type: '证件'
			}
		},
		{
			id: 'foundItems03',
			data: {
				image: 'http://localhost:3000/images/items/卡包.jpg',
				name: '卡包',
				status: '待认领',
				date: '2025-01-06',
				type: '生活用品'
			}
		},
		{
			id: 'foundItems04',
			data: {
				image: 'http://localhost:3000/images/items/绿色雨伞.jpg',
				name: '绿色雨伞',
				status: '待认领',
				date: '2025-01-05',
				type: '生活用品'
			}
		}
	])

	// 闲置物品数据
	const idleItems = ref([
		{
			id: 'idleItems01',
			data: {
				image: 'http://localhost:3000/images/items/铅笔袋.jpg',
				name: '铅笔袋',
				status: '待出售',
				date: '2025-01-08',
				type: '电子设备'
			}
		},
		{
			id: 'idleItems02',
			data: {
				image: 'http://localhost:3000/images/items/手机支架.jpg',
				name: '手机支架',
				status: '待出售',
				date: '2025-01-07',
				type: '电子设备'
			}
		},
		{
			id: 'idleItems03',
			data: {
				image: 'http://localhost:3000/images/items/学生证.jpg',
				name: '学生证',
				status: '待出售',
				date: '2025-01-06',
				type: '图书'
			}
		},
		{
			id: 'idleItems04',
			data: {
				image: 'http://localhost:3000/images/items/眼镜.jpg',
				name: '眼镜',
				status: '待出售',
				date: '2025-01-05',
				type: '电子设备'
			}
		}
	])

	// 寻找闲置数据
	const findIdleItems = ref([
		{
			id: 'findIdleItems01',
			data: {
				image: 'http://localhost:3000/images/items/银色耳机.jpg',
				name: '银色耳机',
				status: '寻找中',
				date: '2025-01-08',
				type: '交通工具'
			}
		},
		{
			id: 'findIdleItems02',
			data: {
				image: 'http://localhost:3000/images/items/airpods.jpg',
				name: 'airpods',
				status: '寻找中',
				date: '2025-01-07',
				type: '电子设备'
			}
		},
		{
			id: 'findIdleItems03',
			data: {
				image: 'http://localhost:3000/images/items/iphone.jpg',
				name: 'iphone',
				status: '寻找中',
				date: '2025-01-06',
				type: '图书'
			}
		},
		{
			id: 'findIdleItems04',
			data: {
				image: 'http://localhost:3000/images/items/OPPO.jpg',
				name: 'OPPO',
				status: '寻找中',
				date: '2025-01-05',
				type: '电子设备'
			}
		}
	])
	// 轮播图数据
	const bannerList = ref([])

	const imageLink = 'http://localhost:3000';
	
	// 获取轮播图数据
	async function getBannerData() {
		try {
			const res = await getBannerList()
			// console.log(res);
			let data = res.data.banners;
			// console.log(typeof data);
			bannerList.value = data.map(item => ({
                ...item,
                id: item._id,
                url: imageLink + item.imageUrl
			}))
		} catch(e) {
			console.error('获取轮播图失败', e)
		}
	}
	
	onMounted(() => {
		getBannerData()
	})

	onShow(()=>{
		const app = getApp();
		if(app.globalData && app.globalData.hasNewSubmission){
			lostItems.value.push(postData.value);
			app.globalData.hasNewSubmission = false;
		}
	})
	
	
	// 记录活跃的tab
	const activeTabIndex = ref(0);
	
	// 切换tab的函数
	function changeTab(index){
		activeTabIndex.value = index;
	}
	
	function onClickToSearch(){
		// console.log('主页点击进入搜索页');
		uni.navigateTo({
			url:'/pages/index/search/search',
			success:()=> {
				console.log('主页点击进入搜索页成功!');
			},
			fail: () => {
				console.log('主页点击进入搜索页失败!');
			}
		})
	}
	
	// 论坛部分	
	// 论坛点赞图标是什么状态：激活还是未激活
	const likeIconActive = ref(false);
	
	const disLikeIconActive = ref(false)
	
	function toggleLikeIcon(){
		if(likeIconActive.value){
			likeIconActive.value = false;
		}else{
			likeIconActive.value = true;
		}
	}
	
	function toggleDisLikeIcon(){
		if(disLikeIconActive.value){
			disLikeIconActive.value = false;
		}else{
			disLikeIconActive.value = true;
		}
	}
	
	
</script>

<style lang="scss" scoped>
// 去除样式
::v-deep .uni-noticebar{
	padding: 0 !important;
	margin: 0 !important;
}

::v-deep .uni-noticebar__content-text{
	font-size: 18rpx !important;
}

.index{
	width: 100%;
	
	
	
	// background-color: #F2F2F2;
	
	&-header{
		width: 100%;
		box-sizing: border-box;
		padding: 0 27rpx;
		padding-bottom: 14rpx;//给头部最下面的搜索加的
		background-color: #81d3f8;
	}

	&-notice{
		width: 100%;
		height: 38rpx;
		margin-bottom: 8rpx;
		&__icon{
			width: 38rpx;
			height: 38rpx;
		}
		
		&__item{
			width: 608rpx;
			// font-size: 18rpx;
		}
	}
	
	&-swiper{
		height: 248rpx;
		margin-bottom: 10rpx;
		&__item{
			width: 100%;
			height: 100%;
			border-radius: 30rpx;
			overflow: hidden;
			
			&-img {
				width: 100%;
				height: 100%;
			}
		}
	}
	
	// 搜索部分
	&-search{
		width: 100%;
		height: 52rpx;
		background-color: #fff;
		border-radius: 30rpx;
		// margin-bottom: 14rpx;
		// padding-bottom: 14rpx;
		&__icon{
			width: 40rpx;
			height: 40rpx;
			margin-left: 32rpx;
			margin-right: 16rpx;
		}
		
		&__input{
			width: 567rpx;
			height: 35rpx;
			min-height: none;
		}
	}
	
	&-main{
		width: 100%;
		background-color: #F2F2F2;
	}
	
	// tab部分
	&-tab{
		height: 74rpx;
		margin-bottom: 25rpx;
		&__item{
			width: 150rpx;
			height: 74rpx;
			line-height: 74rpx;
			background-color: #b4ddee;
			font-size: 25rpx;
			color: #fff;
			text-align: center;
			// flex-shrink: 0;
			border-left: 1rpx solid #fff;
			border-right: 1rpx solid #fff;
			
			&:nth-child(1){
				border-left: none;
			}
			
			&:nth-last-child(1){
				border-right: none;
			}
			&--active{
				background-color: #81d3f8;
				font-weight: 700;
			}
		}
	}
	
	&-items{
		padding: 0 30rpx;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	// 论坛部分
	&-forum{
		// 互动部分
		&__interaction{
			
			&-like{
				margin-right: 15rpx;
				// justify-content: center;
				align-items: center;
			}
			
			&-dislike{
				margin-right: 15rpx;
				align-items: center;
			}
			
			&-reply{
				margin-right: 9rpx;
				align-items: center;
			}
			
			&-icon{
				width: 30rpx;
				height: 30rpx;
			}
			
			&-text{
				font-size: 18rpx;
				color: #797979;
			}
			
			&-view-reply{
				width: 442rpx;
				height: 42rpx;
				line-height: 42rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding-left: 20rpx;
				background-color: rgb(237, 235, 235);
				font-size: 18rpx;
				color: #797979;
			}
		}
	}
}
</style>
